<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>影迷列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="margintop20">
      <el-col>
        <el-table 
        :data="tableData.slice((page-1)*pageSize,pageSize*page)" 
        style="width: 100%"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        stripe
        class="box1"
        >
          <el-table-column label="序号" type="index" width="220"></el-table-column>
          <el-table-column label="注册日期" width="220">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.time | timeFormat('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="220">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>联系方式: {{ scope.row.mobile }}</p>
                <p>密码: {{ scope.row.password }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.username }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="等级" width="220">
            <template slot-scope="scope">
              <el-tag effect="dark" :type="scope.row.roleid | colortype">{{scope.row.roleid | rolename}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="管理员特权：变成猪！">
            <template slot-scope="scope">
              <el-popconfirm
                confirmButtonText='巴拉能力 变'
                cancelButtonText='饶了他'
                icon="el-icon-info"
                iconColor="red"
                title="真的要让他变成猪吗?"
                @onConfirm="delOneList(scope.row)"
                >
                <el-button slot="reference" type="danger" icon="el-icon-delete" circle v-if="scope.row.mobile !== phone && scope.row.roleid < dengji"></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
         <!-- 分页插件 第几页page 一页多少个pageSize 总共多少个total -->
                <div class="flexbox">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        @current-change="changeCurrent"
                        :page-size="pageSize"
                        :current-page="page"
                        :total="total">
                        </el-pagination>
                    <span>共 {{total}} 条数据</span>
                </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getuserlist,deleteuser} from "@/api"
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      // tableData: [],
      page:1,
      pageSize:6,
      phone:localStorage.getItem("mobile"),
      dengji:sessionStorage.getItem('roleid'),
    };
  },
  computed:{
        ...mapState(["tableData"]), 
        total(){
            return this.tableData.length;
        }
    },
  methods: {
    ...mapMutations(["changetableData"]),
    handleEdit() {},
    handleDelete() {},
    changeCurrent(page){//分页绑定事件更改页码配合splice做到分页的效果！！！好好看
        this.page = page;
    },
    delOneList(data){
      deleteuser(data)
      .then(res=>{
        if(res.type){
          this.tableData = this.tableData.filter(item=>item._id!==data._id)
        }
      })
    }
  },
  mounted(){
    // getuserlist()
    // .then(res=>{
    //   this.tableData = res.result
    // })
    if(!this.tableData){
      getuserlist()
      .then(res=>{
        if(res.type){
          this.changetableData(res.result);
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-breadcrumb__inner {
  color: rgb(240, 124, 124) !important;
}
.el-breadcrumb {
  font-size: 30px;
}
.box1{
  height: 450px;
}
.flexbox{
  background: #FAFAFA;
  text-align: right;
}
</style>